<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>定时任务管理</title>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css">
</head>
<body class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md12">
            <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
        </div>
    </div>

    <script type="text/html" id="tableToolbar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add"><i class="layui-icon">&#xe608;</i>新增</button>
            <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDelete"><i class="layui-icon">&#xe640;</i>删除</button>
        </div>
    </script>

    <script type="text/html" id="colToolbar">
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="run"><i class="layui-icon">&#xe652;</i>执行</a>
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete"><i class="layui-icon">&#xe640;</i>删除</a>
    </script>

    <script type="text/html" id="jobStatusTpl">
        <input type="checkbox" name="jobStatus" value="{{d.id}}" lay-skin="switch" lay-text="运行|停止" lay-filter="jobStatus" {{ d.jobStatus? 'checked' : '' }}>
    </script>

    <script src="/plugins/layui/layui.js"></script>
    <script type="text/javascript">
        layui.use(['form', 'table'], function () {
            var $ = layui.jquery,
                form = layui.form,
                table = layui.table;

            var insTb = table.render({
                elem: '#currentTableId',
                url: '/job/list',
                toolbar: '#tableToolbar',
                cols: [
                    [
                        {type: "checkbox", width: '5%', align: "center"},
                        {field: 'id', width: '6%', title: 'ID', sort: true, align: "center"},
                        {field: 'jobName', width: '12%', title: '任务名称', sort: true, align: "center"},
                        {field: 'description', width: '15%', title: '任务描述', align: "center"},
                        {field: 'jobGroup', width: '8%', title: '任务分组', align: "center"},
                        {field: 'beanClass', width: '14%', title: '任务类', align: "center"},
                        {field: 'cronExpression', width: '10%', title: 'cron表达式', align: "center"},
                        {field: 'jobStatus', width: '10%', title: '任务状态', align: "center", toolbar: '#jobStatusTpl'},
                        {title: '操作', width: '20%', toolbar: '#colToolbar', align: "center"}
                    ]
                ],
                limits: [10, 15, 20, 25, 50, 100],
                limit: 10,
                page: true,
                skin: 'line',
                parseData: function (res) {
                    return {
                        "code": 0,
                        "msg": res.msg,
                        "count": res.data.count,
                        "data": res.data.items
                    };
                },
                done: function (res, curr, count) {
                    if (res.code === 500) {
                        layer.alert(res.msg, {icon: 2, title: "提示"});
                    }
                }
            });

            // toolbar监听事件
            table.on('toolbar(currentTableFilter)', function (obj) {
                // 新增任务
                if (obj.event === 'add') {
                    layer.open({
                        title: '新增任务',
                        type: 2,
                        area: ['50%', '50%'],
                        maxmin: true,
                        shadeClose: true,
                        content: '/job/edit'
                    });
                } else if (obj.event === 'batchDelete') { // 批量删除任务
                    var checkStatus = table.checkStatus('currentTableId');
                    var data = checkStatus.data;
                    if (data.length == 0) {
                        layer.msg("请选择要删除的数据！");
                        return;
                    }
                    layer.confirm("确认要删除选中的【" + data.length + "】条数据吗?", {icon: 2, title: "提示"}, function (index) {
                        var ids = new Array();
                        // 遍历所有选择的行数据，取每条数据对应的ID
                        for (var i = 0; i < data.length; i++) {
                            ids[i] = data[i].id;
                        }
                        $.post("/job/batchDelete", {ids: ids}, function (res) {
                            if (res.code === 200) {
                                layer.msg('删除成功！', {icon: 1});
                                insTb.reload();
                            } else {
                                layer.alert(res.msg, {icon: 2, title: "提示"});
                            }
                        });
                        layer.close(index);
                    });
                }
            });

            // tool监听事件
            table.on('tool(currentTableFilter)', function (obj) {
                var data = obj.data;

                // 执行任务
                if (obj.event === 'run') {
                    var loadIndex = layer.load(2);
                    $.post("/job/run/" + data.id, {}, function (res) {
                        layer.close(loadIndex);
                        if (res.code === 200) {
                            layer.msg('任务执行成功！', {icon: 1});
                        } else {
                            layer.alert(res.msg, {icon: 2, title: "提示"});
                        }
                    });
                } else if (obj.event === 'edit') { // 编辑任务
                    window.data = data;
                    layer.open({
                        title: '编辑任务',
                        type: 2,
                        area: ['50%', '50%'],
                        maxmin: true,
                        shadeClose: true,
                        content: '/job/edit'
                    });
                } else if (obj.event === 'delete') { // 删除任务
                    layer.confirm('确认删除吗？', {icon: 2, title: "提示"}, function (index) {
                        layer.close(index);
                        var loadIndex = layer.load(2);
                        $.post("/job/delete/" + data.id, {}, function (res) {
                            layer.close(loadIndex);
                            if (res.code === 200) {
                                layer.msg('删除成功！', {icon: 1});
                                obj.del();
                                insTb.reload();
                            } else {
                                layer.alert(res.msg, {icon: 2, title: "提示"});
                            }
                        });
                    });
                }
            });

            // 监听任务状态切换
            form.on('switch(jobStatus)', function (obj) {
                var loadIndex = layer.load(2);
                $.post("/job/changeStatus/" + this.value, {jobStatus: obj.elem.checked}, function (res) {
                    layer.close(loadIndex);
                    if (res.code === 200) {
                        layer.tips('任务' + ((obj.elem.checked) ? "运行" : "停止"), obj.othis, {tips: 3});
                    } else {
                        layer.alert(res.msg, {icon: 2, title: "提示"});
                    }
                });
            });
        });
    </script>
</body>
</html>
